<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template #header>
        <div>
          <el-button
            type="primary"
            size="default"
            icon="ele-Plus"
            @click="toAddSpu"
            :disabled="!category3Id"
            >添加SPU</el-button
          >
        </div>
      </template>
      <el-table border stripe :data="pagingList">
        <el-table-column type="index" width="70" label="序号" />
        <el-table-column label="SPU名称" prop="spuName"> </el-table-column>
        <el-table-column label="SPU描述" prop="description"> </el-table-column>
        <el-table-column label="操作" width="249">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              size="small"
              @click=""
              icon="ele-Plus"
            ></el-button>
            <el-button
              type="warning"
              size="small"
              @click="emit('cutSpuComponent', 2, row)"
              icon="ele-Edit"
            ></el-button>
            <el-button
              type="info"
              size="small"
              @click=""
              icon="ele-Warning"
            ></el-button>
            <el-button
              type="danger"
              size="small"
              @click=""
              icon="ele-Delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        :style="{ marginTop: '20px' }"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 7, 9]"
        layout="  prev, pager, next,sizes,total"
        :total="total"
      />
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "SpuList",
});
</script>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import {
  reqGetPagingList,
  type PagingItemType,
  type PagingListType,
} from "@/api/spu";
import useCategroyStore from "@/stores/category";
import { storeToRefs } from "pinia";

// categroyStore 对象
const categroyStore = useCategroyStore();
// 从store中获取数据
const { category3Id } = storeToRefs(categroyStore);
const currentPage = ref(1); //当前页
const pageSize = ref(3); // 每页展示条数
const total = ref(0); // 总条数

// 获取自定义事件
const emit = defineEmits<{
  (event: "cutSpuComponent", index: number, row?: PagingItemType): void;
}>();

// 分页列表数据
const pagingList = ref<PagingListType>([]);

// 请求分页列表数据方法
const getPagingList = async () => {
  const result = await reqGetPagingList(
    currentPage.value,
    pageSize.value,
    category3Id.value as number
  );
  // 保存分页列表数据
  pagingList.value = result.records;
  // 获取总条数
  total.value = result.total;
};

// 监听category3Id 发生变化请求数据
watch(category3Id, () => {
  // 每次请求都先清空展示数据
  pagingList.value = [];
  // 判断是否有category3Id
  if (!category3Id.value) return;
  // 请求分页列表的数据
  getPagingList();
});

// 监听页码变化更新数据
watch([currentPage, pageSize], getPagingList);

// 初始化判断是否category3Id  如果有请求数据
onMounted(() => {
  if (category3Id.value) getPagingList();
});
// 点击添加SPU
const toAddSpu = () => {
  const row = {
    category3Id: category3Id.value as number,
    description: "",
    spuName: "",
    tmId: null,
    spuSaleAttrList: [],
    spuImageList: [],
  };
  emit("cutSpuComponent", 2, row);
};
</script>

<style scoped lang="scss"></style>
